<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,
        h1,
        a{
            margin: 0;
            padding: 0%;
        }
        .con{
            background-color: aqua;}
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
        .pop-menu{
            float: left;
            margin-left: 2em;
            position: relative;
        }
        .menu{
            display: none;
            position: absolute;
            top: 100%;
        }
        /*.text-menu{
            width: 16em;
            background-color: blanchedalmond;
            
        }*/
        .img-menu{
            content: "";
            border-right: solid 4px transparent;
            border-bottom: solid 4px red;
            border-left: solid 4px transparent;
            position: absolute;
            left: 20px;
            bottom: 100%;
        }
        .section-menu{
            border: 1px rgb(197, 13, 13) solid;
            background-color: rgb(255, 109, 12);
            width: 300px;
            height: 300px;
        }
        .text-menu-item{
            display: block;
            text-decoration: none;
            text-align: left;
            line-height: 2em;
        }
        .seperator{
            border-bottom: 1px solid rgb(114, 112, 109);
        }
        .text-menu-item:hover{
            color: #fff;
            background-color: rgb(37, 35, 35);
        }
        .pop-menu:hover .menu{
            display: block;
        }

    </style>
</head>
<body>
    <div class="con clearfix">
    <h1 class="pop-menu">菜单1
        <div class="menu section-menu">
            <a href="" class="text-menu-item"> 第一行</a>
           <a href="" class="text-menu-item">第二行</a> 
            <div class="seperator"></div> 
           <a href="" class="text-menu-item">第三行</a> 
        </div> 
    </h1>
    <h1 class="pop-menu">菜单2
        <div class="menu section-menu">
            <a href="" class="text-menu-item"> 第一行</a>
           <a href="" class="text-menu-item">第二行</a> 
            <div class="seperator"></div> 
           <a href="" class="text-menu-item">第三行</a> 
        </div> 
    </h1>
    <h1 class="pop-menu">菜单3
        <div class="menu img-menu">
            <a href=""><img src="http://codelover.club/stutasks/userID_260/currNo_7/21/探究定位及应用/01.png" alt=""></a>
        </div>
    </h1>
    <h1 class="pop-menu">菜单4
    <div class="menu section-menu">
        最后一项<br>
        最后一项<br>
        最后一项<br>
    </div>
    </h1>
</div>
<div>
是摆烂的  你起床的铃声~充耳不闻~再摆几分
都~不必隐藏  你渴望的眼神~你的灵魂~你的虔诚
他们说  要带着光  迎接每一个清晨
他们说  要离开你的床  基本上不可能
为何青春  分秒必争
有困难就开润  绝不会等  谁说安于摆烂的不必狗稳<br>
小组作业从不忙  不到考试周不慌  作业抄的那么狂  标 · 点 · 都 · 一 · 样<br>
爱你孤身进考场  爱你不会的模样  爱你对峙过迷惘  最 · 后 · 不 · 如 · 躺<br>
去吗 配吗  这该死的从容  摆吗  摆啊  去骄傲的放纵<br>
致那黑夜中的呜咽与怒吼  谁说绩点第一的才是英雄<br>
他们说  要戒了你的狂  胸中万事有浮沉  <br>
他们说  要迎困难而上  而 西东 亦 不问<br>
摆烂的人  不会承认  他仍然从容地  故作高深  却说百无一用的还是书生<br>
爱你年少曾秉灯  十年寒窗无人问  如今踏入大学门  志向却不存<br>
恨你以平凡为盾  自诩已是人上人  酒肆藏名三十春  却作茧自困<br>
去吗  配吗  这褴褛的披风  战吗 战啊  平凡绝不平庸<br>
致那黑夜中的呜咽与怒吼  谁说对弈摆烂的不算英雄<br>
你的斑驳与众不同  你的沉默震耳欲聋<br>
愿君仗剑走四方  愿君得失不思量  愿君蓦然回首望  不负少年样<br>
越过时间的沧桑  而今山河已无恙  吾辈当乘千里浪  兴中华之邦<br>
去吗 去啊  为民族复兴梦  战吗  战啊  趁年华正青葱<br>
</div>
</body>
</html>